import React, { useRef } from 'react';
import { Modal, Form, Button, Input } from 'antd';

interface CreateUnitProps {
  initValues?: {
    id?: string;
    pid?: string;
    name?: string;
  };
  visible: boolean;
  title: any;
  onCancel: () => void;
  onSave: (params: object) => void;
}

const CreateUnit: React.FC<CreateUnitProps> = (props) => {
  const [form] = Form.useForm();
  const formRef = useRef(null);
  const { initValues, visible, title, onCancel, onSave } = props;
  const { id, pid, name } = initValues || {};

  return (
    <Modal
      destroyOnClose
      title={title}
      visible={visible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form
        ref={formRef}
        form={form}
        onFinish={(e) => {
          onSave(e);
        }}
      >
        <Form.Item name="id" initialValue={id} noStyle>
          <Input hidden />
        </Form.Item>
        <Form.Item name="pid" initialValue={pid} noStyle>
          <Input hidden />
        </Form.Item>
        <Form.Item
          name="name"
          label="单体名称"
          initialValue={name}
          rules={[
            { required: true, message: '必填' },
            { max: 20, message: '最长不超过20个字符！' },
          ]}
        >
          <Input maxLength={20} />
        </Form.Item>

        <Form.Item>
          <Button size="large" type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateUnit;
